<script lang="ts">
  import { onMount } from 'svelte'

  const getTime = () => {
    const date = new Date()
    const hour = String(date.getHours()).padStart(2, '0')
    const minute = String(date.getMinutes()).padStart(2, '0')
    return `${hour}:${minute}`
  }

  let time = getTime()
  const link = 'https://github.com/guocaoyi/create-chrome-ext'

  onMount(() => {
    let intervalor = setInterval(() => {
      time = getTime()
    }, 1000)

    return () => clearInterval(intervalor)
  })
</script>

<section>
  <span></span>
  <h1>{time}</h1>
  <a href={link} target="_blank"> generated by create-chrome-ext </a>
</section>

<style>
  :global(:root) {
    font-family:
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      Roboto,
      Oxygen,
      Ubuntu,
      Cantarell,
      'Open Sans',
      'Helvetica Neue',
      sans-serif;

    color-scheme: light dark;
    background-color: #242424;
  }

  @media (prefers-color-scheme: light) {
    :global(:root) {
      background-color: #fafafa;
    }

    a:hover {
      color: #ff3e00;
    }
  }

  :global(body) {
    min-width: 20rem;
    margin: 0;
  }

  section::before {
    content: '';
    position: fixed;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    background-image: url('https://source.unsplash.com/random');
    background-size: cover;
    filter: blur(10px);
  }

  section {
    width: 100vw;
    height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  h1 {
    color: #ff3e00;
    text-transform: uppercase;
    font-size: 6rem;
    margin: 2rem auto;
  }

  a {
    font-size: 0.5rem;
    margin: 0.5rem;
    color: #cccccc;
    text-decoration: none;
  }
</style>
